Ext.ns('App', 'App.control');

// create the Data Store
store = new Ext.data.JsonStore({
    root: 'results',
    totalProperty: 'totalCount',
    idProperty: 'projectid',
    remoteSort: true,
    
    fields: ['reviewstatus', {
        name: 'roadway',
        type: 'boolean'
    }, {
        name: 'description',
        type: 'string'
    }, {
        name: 'end_date',
        type: 'date',
        dateFormat: 'm/d/Y'
    }, {
        name: 'projectno',
        type: 'string'
    }, {
        name: 'projectid',
        type: 'string'
    }, {
        name: 'project',
        type: 'string'
    }, {
        name: 'garage',
        type: 'boolean'
    }, {
        name: 'adaparking',
        type: 'boolean'
    }, {
        name: 'sidewalk',
        type: 'boolean'
    }, {
        name: 'start_date',
        type: 'date',
        dateFormat: 'm/d/Y'
    }, {
        name: 'pm',
        type: 'string'
    }, {
        name: 'geometry',
        type: 'string'
    }, {
        name: 'x',
        type: 'float'
    }, {
        name: 'y',
        type: 'float'
    }, ],
    
    // load using script tags for cross domain, if the data in on the same domain as
    // this page, an HttpProxy would be better
    proxy: new Ext.data.HttpProxy({
        url: '/test?request_type=list'
    })
});
store.setDefaultSort('start_date', 'desc');
store.setBaseParam('record_status', 'existing');

App.control.gridPanel = Ext.extend(Ext.grid.GridPanel, {




    onToggle: function(btn, pressed){
        var view = this.getView();
        view.showPreview = pressed;
        view.refresh();
    },
    initComponent: function(){
        function highlight(val){
            if (val) {
                return '<span style="color:red;">Yes</span>';
            }
            else {
                return '<span style="color:green;">No</span>';
            }
        };
        var config = {
        
            width: 500,
            height: 500,
            iconCls: 'icon-impact',
            
            store: store,
            trackMouseOver: true,
            disableSelection: false,
            loadMask: true,
            plugins: new Ext.ux.grid.ColumnHeaderGroup({
                rows: [
						[{header: 'Project Info',colspan: 4,align: 'center'},
						{header: 'Schedule',colspan: 2,align: 'center'},
						{header: 'Impact',colspan: 4,align: 'center'},
						{header: 'Geometry',colspan: 3,align: 'center'}]
				]
            }),
            
            
            // grid columns
            columns: [new Ext.grid.RowNumberer({
                width: 20
            }), {
                header: "Project No.",
                dataIndex: 'projectno',
                width: 50,
                sortable: true
            },  {
                header: "Project",
                dataIndex: 'project',
                width: 100,
                sortable: true
            }, {
                header: "PM",
                dataIndex: 'pm',
                width: 50,
                sortable: true
            }, {
                header: "Start",
                dataIndex: 'start_date',
                width: 30,
                renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                sortable: true,
                hidden: false
            }, {
                header: "End",
                dataIndex: 'end_date',
                width: 30,
                renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                sortable: true,
                hidden: false
            }, {
                header: "Road",
                dataIndex: 'roadway',
                width: 30,
                renderer: highlight,
                sortable: true,
                hidden: false
            }, {
                header: "Garage",
                dataIndex: 'garage',
                renderer: highlight,
                width: 30,
                sortable: true,
                hidden: false
            }, {
                header: "ADA",
                dataIndex: 'adaparking',
                renderer: highlight,
                width: 30,
                sortable: true,
                hidden: false
            }, {
                header: "Sidewalk",
                dataIndex: 'sidewalk',
                renderer: highlight,
                width: 30,
                sortable: true,
                hidden: false
            }, {
                header: "geometry",
                dataIndex: 'geometry',
                width: 30,
                sortable: true,
                hidden: true
            }, {
                header: "y",
                dataIndex: 'y',
                width: 30,
                hidden: true
            }, {
                header: "x",
                dataIndex: 'x',
                width: 30,
                sortable: true,
                hidden: true
            }],
            sm: new Ext.grid.RowSelectionModel({
                singleSelect: true
            
            }),
            
            // customize view config
            viewConfig: {
                forceFit: true,
                enableRowBody: true,
                showPreview: false,
                getRowClass: function(record, rowIndex, p, store){
                    function getURL(record){
                    
                        var url;
                        var path = [];
                        pt = [record.data.x, record.data.y];
                        
                        var x = Ext.util.JSON.decode(record.data.geometry);//geojson format, //x = 
                        for (var i = 0; i < x.coordinates[0].length; i++) {
                            var xy = x.coordinates[0][i];
                            path.push([xy[1].toFixed(4) + ',' + xy[0].toFixed(4)])
                        }
                        
                        var path_str = path.join('|');
                        
                        
                        
                        url = 'http://maps.google.com/maps/api/staticmap?size=100x100&path=fillcolor:blue|color:0xFFFFFF00|' + path_str + '&sensor=false&markers=color:blue|' + pt[1] + ',' + pt[0];
                        
                        
                        
                        return url
                    };
                    if (this.showPreview) {
                    
                    
                    
                        var html = String.format('<div style="float:left;padding:5 5 5 5;" ><img src="{4}" width=100 height=100/></div><div ><h1>{5}</h1>{0} -- {1}<br>Traffic Impacts:{2}<br>{3}</div>', Ext.util.Format.dateRenderer('m/d/y')(record.data.start_date), Ext.util.Format.dateRenderer('m/d/y')(record.data.end_date), '', record.data.description, getURL(record), record.data.project);
                        p.body = '<p style="color:grey;">' + html + '</p>';
                        return 'x-grid3-row-expanded';
                    }
                    return 'x-grid3-row-collapsed';
                }
            },
            listeners: {
                //viewready:
                viewready: function(g){
                
                    g.getSelectionModel().selectRow(0);
                }
            },
            
            // paging bar on the bottom
            tbar: new Ext.Toolbar({
                items: [{
                    xtype: 'button',
                    text: 'Delete',
                    iconCls: 'icon-delete',
                    id: 'app-grid-panel-delete_btn'
                
                
                }, {
                    xtype: 'button',
                    text: 'New',
                    iconCls: 'icon-add',
                    id: 'app-grid-panel-new-btn'
                
                }, {
                    xtype: 'button',
                    pressed: false,
                    enableToggle: true,
                    text: 'Show Preview',
                    cls: 'x-btn-text-icon details',
                    toggleHandler: this.onToggle,
                    scope: this
                }]
            }),
            bbar: new Ext.PagingToolbar({
                pageSize: App.config.PAGE_SIZE,
                store: store,
                displayInfo: true,
                id: 'app-paging-toolbar',
                displayMsg: 'Displaying topics {0} - {1} of {2}',
                emptyMsg: "No topics to display"
            
            })
        
        }; // eo config object
        // apply config
        Ext.apply(this, Ext.apply(this.initialConfig, config));
        
        App.control.gridPanel.superclass.initComponent.apply(this, arguments);
    } // eo function initComponent
    //    ,onRender: function(){
    //        this.store.load();
    //        
    //        App.control.mapField.superclass.onRender.apply(this, arguments);
    //    } // eo function onRender
});

Ext.reg('app_gridpanel', App.control.gridPanel);


